.navWrap {
  width: 505.33px;
  height: 500px;
}
.navWrap ul {
  width: 100%;
  height: 100%;
  position: relative;
}
.navWrap ul li {
  width: 200px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  animation-name: moveX, moveY, scale;
  animation-duration: 10s, 10s, 20s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.36, 0, 0.64, 1);
  animation-delay: -5s, 0s, 0s;
}
.navWrap ul li img {
  width: 180px;
}
.navWrap ul li span {
  color: white;
}
.animation_paused {
  animation-play-state: paused;
}
@keyframes moveX {
  0% {
    left: 0px;
  }
  100% {
    left: 600px;
  }
}
@keyframes moveY {
  0% {
    top: 0px;
  }
  100% {
    top: 200px;
  }
}
@keyframes scale {
  0% {
    transform: scale(0.4);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.4);
  }
}
.wrap {
  width: 500px;
  height: 400px;
  border: 1px solid #ccc;
}
.wrap img {
  width: 20%;
}
